<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>全局样式</title>
<link rel="stylesheet/less" type="text/css" href="../src/less/index.less" />
<script src="js/less.min.js" type="text/javascript"></script>
</head>

<body ontouchstart>
<div class="kui-page">
	<div class="kui-header">
		<div class="pull-left icon-left app-back" onClick="history.back()">返回</div>
		<h1 class="kui-title">全局样式</h1>
	</div>
	<div class="kui-content">
		<div class="kui-block-title">分隔线</div>
		<div class="kui-blocker Pd">
			<div class="kui-line-title"><span class="kui-line-txt">状态背景</span></div>
			<div class="kui-line-title"><span class="kui-line-txt"><i class="icon-dot"></i></span></div>
			<div class="kui-line-title"><span class="kui-line-txt"><i class="icon-load"></i>正在加载</span></div>
			
			<p class="Pd"></p>
			<fieldset class="kui-line-title">
				<legend>fieldset分隔线</legend>
			</fieldset>
		</div>
		<div class="kui-block-title">栏目框（fieldset）</div>
		<div class="kui-blocker Pd">
			<fieldset>
				<legend>栏目标题</legend>
				<p>普通栏目内容</p>
			</fieldset>
			<p class="Pd"></p>
			<fieldset class="rand-s">
				<legend class="kui-text-success tc">栏目标题(.tc)</legend>
				<p class="Plr">圆角居中栏目内容</p>
			</fieldset>
		</div>
		<div class="kui-block-title">文本颜色、背景</div>
		<div class="kui-blocker Pd">
			<div class="kui-line-title"><strong class="kui-line-txt">状态文字</strong></div>
			<div class="kui-text-default">kui-text-default</div>
			<div class="kui-text-primary">kui-text-primary</div>
			<div class="kui-text-success">kui-text-success</div>
			<div class="kui-text-danger">kui-text-danger</div>
			<div class="kui-text-warning">kui-text-warning</div>
			<div class="kui-text-node">kui-text-node</div>
			<div class="kui-line-title"><strong class="kui-line-txt">状态背景</strong></div>
			<div class="kui-bg-default">kui-bg-default</div>
			<div class="kui-bg-primary">kui-bg-primary</div>
			<div class="kui-bg-success">kui-bg-success</div>
			<div class="kui-bg-danger">kui-bg-danger</div>
			<div class="kui-bg-warning">kui-bg-warning</div>
			<div class="kui-line-title"><strong class="kui-line-txt">状态提示</strong></div>
			<div class="kui-tips-default">kui-tips-default</div>
			<div class="kui-tips-primary Mt">kui-tips-primary</div>
			<div class="kui-tips-success Mt">kui-tips-success</div>
			<div class="kui-tips-warning Mt">kui-tips-warning</div>
			<div class="kui-tips-danger Mt">kui-tips-danger</div>
		</div>
		<div class="kui-block-title">列表红点</div>
		<div class="kui-blocker Pd">
			<span class="kui-reddot">红点标题</span>
			<span class="kui-reddot-s">红点标题</span>
		</div>
		<div class="kui-block-title">常用类</div>
		<div class="kui-blocker Pd">
			<table class="kui-table kui-table-active" width="100%" border="0" cellspacing="5" cellpadding="5">
				<tr>
					<th>类名</th>
					<th>用途</th>
				</tr>
				<tr>
					<td>.cl</td>
					<td>请除clear:both</td>
				</tr>
				<tr>
					<td>.overhide</td>
					<td>溢出隐藏</td>
				</tr>
				<tr>
					<td>.fl</td>
					<td>向左浮动float:left</td>
				</tr>
				<tr>
					<td>.fr</td>
					<td>向左浮动float:right</td>
				</tr>
				<tr>
					<td>.rand</td>
					<td>圆角0.5rem</td>
				</tr>
				<tr>
					<td>.unselect</td>
					<td>禁止选择</td>
				</tr>
			</table>
			<div class="kui-line-title"><strong class="kui-line-txt">其他类</strong></div>
			<p>外边距：<strong>Ml</strong>,<strong>Mr</strong>,<strong>Mt</strong>,<strong>Mb</strong>,<strong>Mtb</strong>,<strong>Mlr</strong></p>
			<p>内边距：<strong>Pl</strong>,<strong>Pr</strong>,<strong>Pt</strong>,<strong>Pb</strong>,<strong>Ptb</strong>,<strong>Plr</strong></p>
		</div>
	</div>
</div>
</body>
</html>
